<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市区三级联动</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<meta name=renderer  content=webkit>
		<link rel="stylesheet" type="text/css" href="css/picker.css?v=12345"/>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/location1.js" ></script>
		<script type="text/javascript" src="js/Picker.js?v=123"></script>
		<style type="text/css">
		* { margin: 0; padding: 0; }
		html,body { height: 100%; }
		.city { border: 1px solid #999; width: 150px; height: 26px; font-size: 12px; line-height: 26px; }
		</style>
		<script>
		(function (doc, win) {
		   var docEl = doc.documentElement,
		   resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		   recalc = function () {
		     var clientWidth = docEl.clientWidth;
		     if (!clientWidth) return;         
		     if(clientWidth > 750){
				docEl.style.fontSize = 20 * (750 / 375) + 'px';
		     }
		     else{
			  docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
			 }
		    };
		    if (!doc.addEventListener) return;
		    win.addEventListener(resizeEvt, recalc, false);
		    doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
		</script>
	</head>
	<body>
		<div class="city" id="city"></div>
		<div class="city" id="city2"></div>
		<script>
			$(function(){
				$("#city").Picker({
					city: true,
					area: true,
					pca: ['广东','深圳','南山'],
					pick: function(res){
						console.log(res)
					}
				})
				$("#city2").Picker({
					city: true,
					area: true,
					pca: ['广东','广州','越秀'],
					pick: function(res){
						console.log(res)
					}
				})
			})
			
			
		</script>
	</body>
</html>
